// 获取元素
var roles = document.getElementById('roles');

var zus = document.getElementsByClassName('zu');

var lis = roles.getElementsByTagName('li');

// 定义定时器标记
var run;

// 循环遍历单击 人族魔族仙族 事件  
// 并且添加并移除类名
for(var i=0;i<zus.length;i++){
	// 单击事件
	zus[i].onclick = function(){
		// 获取类名元素
		var active = document.getElementById('active');
		// 移除上一个类名
		active.removeAttribute('id');
		// 给当前所点击的添加类名
		this.setAttribute('id','active');
	}
}

// 循环遍历 roles中 所有的li 元素 并添加鼠标以上事件 
for(var i=0;i<lis.length;i++){
	lis[i].onmouseenter = function(){
		var active_role = this.parentElement.getElementsByClassName('active_role')[0];
		var selfThis = this;
		run = setTimeout(function(){
			active_role.removeAttribute('class');
			selfThis.setAttribute('class','active_role');
		},300)

	}
	lis[i].onmouseleave = function(){
		clearTimeout(run);
	}
}